v1.0 · Mayo 2026

Sistema de Diseño UNACH

Lineamientos de identidad visual e interfaz para sistemas institucionales de la Universidad Adventista de Chile. Cubre marca, color, tipografía, espaciado, componentes y reglas de uso obligatorias para todo nuevo desarrollo.

Marca

Logo institucional

El símbolo de la "A" con tres líneas representa el mensaje de los tres ángeles y la identidad adventista. Tres variantes: vertical (master), horizontal (default para navbars), y horizontal con divisor (para sub-marcas).

Horizontal · sobre claro

Sobre Adventist Blue

Símbolo

Qué no hacer

No aplicar degradados ni texturas

No rotar, comprimir ni estirar

No reemplazar la tipografía del lockup

No usar otros colores que los del manual

No invertir la posición A↔texto

No reducir bajo 28 px (símbolo) / 85 px (lockup)

Color

Paleta institucional

Paleta DTI para sistemas digitales. Cada color principal tiene una escala de 5 tonos (100–500) anclada al valor 300 (base).

Azul Institucional · Primary

100

#CCE7FE

200

#99CFFC

300 · base

#0095F8

400

#007AC9

500

#005F9A

Azul Medio · Secondary

100

#D1E0F4

200

#8FB6E5

300 · base

#1976D2

400

#145FA8

500

#0F477E

Turquesa · Auxiliar

100

#CCEEF3

200

#80D6E0

300 · base

#00ACC1

400

#008A9B

500

#006774

Neutrales

white

#FFFFFF

#FAFAFA

100

#F5F5F5

200

#E5E5E5

300

#CFCFCF

400

#9A9A9A

500

#6E6E6E

600 · text

#474747

700

#2E2E2E

800

#1C1C1C

900

#0F0F0F

Semánticos

Error

Validaciones críticas y mensajes de error.#E27474

Éxito

Confirmaciones y notificaciones positivas.#6AC86F

Alerta

Advertencias y estados intermedios.#D6A40B

Info

Notas contextuales y mensajes neutros.#1976D2

Tipografía

Familias y escala

Prompt es la familia oficial UNACH para títulos, encabezados y cuerpo. NovaMono se reserva para datos técnicos y fragmentos de código. Máximo dos familias por pantalla.

Prompt Display + Body
Google Fonts
300 · 400 · 500 · 600 · 700

Aa Bb Cc 0123

Universidad · Acreditación · Vinculación con el medio

NovaMono Código · datos técnicos
Bundled local TTF
400

Aa Bb 0123
--color-primary: #0095F8;

Escala display

H1Universidad Adventista de Chile40 / 600

H2Encabezado de sección principal34 / 600

H3Título de tarjeta o formulario28 / 600

H4Sub-encabezado de bloque24 / 500

H5Etiqueta de grupo20 / 500

Escala body + mono

B1Texto de cuerpo principal — Prompt 16 px, line-height 1.5. Ancho máximo 75 ch para mantener legibilidad.16 / 400

B2Descripciones y ayudas contextuales secundarias.14 / 400

B3ETIQUETA DE FORMULARIO12 / 500

B4Notas al pie · textos auxiliares pequeños10 / 400

B5const api = "https://sigae.unach.cl/v1"8 / mono

Espaciado

Sistema base 4

Todos los márgenes, paddings y gaps deben ser múltiplos de 4 px. Esto garantiza consistencia visual entre sistemas distintos del ecosistema institucional.

--space-xs4 px

Icono ↔ texto, gap mínimo

--space-sm8 px

Padding interno de chips, badges

--space-md16 px

Padding de tarjetas, separación de campos

--space-lg24 px

Separación entre secciones de formulario

--space-xl32 px

Margen entre bloques principales

--space-2xl48 px

Separación de secciones de página

--space-3xl64 px

Hero, separación entre vistas

Geometría

Radios de esquina

Default 8 px (cards, inputs, buttons). 12 px para modales y bottom-sheets. Pill para badges y avatares.

--radius-none

--radius-xs

2 px

--radius-sm

4 px

--radius-md

8 px · default

--radius-lg

12 px

--radius-xl

16 px

--radius-pill

∞

Profundidad

Elevación

Sombras suaves y cortas. No usar drop shadows agresivos — el lenguaje visual institucional es sobrio, no efectista.

flat

1 px border

--shadow-sm

subtle lift

--shadow-md

cards · default

--shadow-lg

menus · popovers

--shadow-xl

modal · sheet

Componente

Botones

Altura mínima 40 px, padding horizontal 16 px, radio 8 px. Todo botón interactivo debe documentar Default · Hover · Pressed · Disabled · Loading.

Default Hover Pressed Disabled Loading Primary Secondary Danger

Componente

Campos de texto

Material Outlined como base. Altura 40 px, radio 8 px. Etiqueta sobre el campo, helper text debajo, mensajes de error en rojo institucional.

RUTDefault

RUTFocus

RUTFormato inválido

RUTDisabled

RUTRead-only

RUTVerificado

Componente

Controles de formulario

Área táctil accesible (mínimo 24 × 24 px de hit-target), color primario al activarse, estados explícitos.

Checkbox

Unchecked ✓Checked —Indeterminate Disabled

Radio

Presencial Online Disabled

Switch

Notif. email Modo oscuro SMS

Componente

Alertas y badges

Iconografía + color semántico + texto. Los colores de estado nunca son decorativos.

✓

Solicitud enviada.Bienestar Estudiantil revisará tu caso en 48 horas.

No se pudo guardar.Revisa los campos marcados en rojo.

Tu sesión está por expirar.Guarda tus cambios antes de continuar.

Mantención programada.El sistema estará no disponible el sábado 21/06 entre 02:00 y 04:00.

Matriculado Pagado Pendiente Vencido Borrador Becado En revisión

Componente

Tarjetas

Tres estados: estática (border 1 px), elevada (sombra suave), seleccionada (border 2 px primary).

Estática

Acreditación CNA · vigente hasta 2028

5 años

Elevada

Matrículas procesadas hoy

128

Seleccionada

Pedagogía en Educación Física

Componente

Tabla de datos

Header gris claro, mayúsculas pequeñas trackeadas, hover row sutil, divisores horizontales únicamente.

Estudiante	Programa	Estado	Arancel	Último acceso
Daniela Ruiz Morales 20.418.392-7	Pedagogía en Educación Física	Activo	Al día	14/05/2026
Pedro Caro Vergara 19.882.103-K	Pedagogía en Educación Física	Activo	Pendiente	14/05/2026
Antonia Jara Sandoval 19.667.881-1	Pedagogía en Inglés	Egresado	Al día	02/03/2026
Matías Pino Larenas 20.998.121-4	Agronomía	Suspendido	Vencido	08/04/2026